<template>
	<div class="mark" v-if="bool">
		<div class="alert">
			<!-- 内容 -->
			<div class="cont">
				<a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol" layout="horizontal">
					<a-form-item label="类型">
						<a-select v-model:value="formState.type">
							<a-select-option value="protocol">protocol</a-select-option>
							<a-select-option value="notice">notice</a-select-option>
							<a-select-option value="common">common</a-select-option>
						</a-select>
					</a-form-item>
					<a-form-item label="分类名称">
						<a-input v-model:value="formState.name" />
					</a-form-item>
					<a-form-item label="排序">
						<a-input v-model:value="formState.sort" />
					</a-form-item>
					<a-form-item label="是否展示">
						<a-select v-model:value="showText" @change="handleSelectChange">
							<a-select-option value="1">显示</a-select-option>
							<a-select-option value="0">不显示</a-select-option>
						</a-select>
						<!--  <span>1为显示，0为不显示  </span>-->
					</a-form-item>
				</a-form>
			</div>
			<!-- 按钮 -->
			<div class="btns">
				<a-button @click="addSure">确定</a-button>
				<a-button @click="cancel">取消</a-button>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				// 转换是否显示
				showText: '1',
				bool: false,
				formState: {
					type: '',
					name: '',
					show: '',
					sort: 0,
				},
				labelCol: {
					span: 8
				},
				wrapperCol: {
					span: 10
				},
			}
		},
		mounted() {
			if (this.formState.id > 0) {
				this.addSure()
			}
		},
		methods: {
			handleSelectChange(value) {
				console.log(value);
				// this.formState.show({
				// 	note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
				// });
			},
			/*打开确认面板*/
			addOpen() {
				this.bool = true;
				this.formState = {
					type: '',
					name: '',
					show: '',
					sort: 0,
				}
			},
			/*打开修改面板*/
			changeData(item) {
				this.bool = true;
				this.formState = item
			},
			cancel() {
				this.bool = false
			},
			/*点击确定*/
			addSure() {
				this.formState.show = this.showText
				this.$emit('sureData', this.formState);
				this.cancel();

			},
			// 修改
			articlForm(e) {
				this.bool = true;
				this.formState = e;
				let show = this.formState.show
				show = show == true ? '1' : '0';
				this.showText = show
			}
		}
	};
</script>

<style scoped>
	.mark {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 1000;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.alert {
		background: #fff;
		width: 600px;
	}

	.cont {
		display: flex;
		height: 400px;
	}

	.btns {
		height: 60px;
		background-color: #41B883;
		display: flex;
		align-items: center;
		justify-content: end;
	}

	.ant-btn,
	.ant-btn:active,
	.ant-btn:focus {
		margin-left: 30px;
		margin-right: 10px;
	}

	.ant-form {
		box-sizing: border-box;
		/* margin: 37px; */
		margin-top: 50px;
		padding: 0;
		color: rgba(0, 0, 0, 0.85);
		font-size: 14px;
		font-variant: tabular-nums;
		line-height: 1.5715;
		list-style: none;
		font-feature-settings: 'tnum';
		width: 100%;
	}

	.upImg[data-v-7fdc8d5f] {
		width: 814px;
		margin-left: -75px;
	}

	:deep(.ant-form-item ) {
		margin-bottom: 15px !important;
	}
</style>